<!--公司人的订单详情-->
<template> 
  <div class="contain">
    <app-header></app-header>
    <div class="dt-head" :class="{add:todolist.BillState == 'P02'}">
      <div class="dt-head-fix">
        <template v-if="todolist.BillState == 'P02'">
          <detail-header 
            :status="'请受理订单'"
            :id="todolist"></detail-header>
        </template>
        <template v-else>
          <detail-header :id="todolist"></detail-header>
        </template>
        <!--tab-->
        <div class="lltab mb10 ft14">
          <tab bar-active-color="#77babd" 
               defaultColor="#333333"
               active-color="#77babd"
               :line-width='2'>
            <tab-item selected 
              @on-item-click="tab=true">商品信息</tab-item>
            <tab-item 
              @on-item-click="tab=false">订单反馈</tab-item>
          </tab>
        </div>
      </div>
    </div>
    <div class="detail-tab-lft" v-if="tab">
      <div class="detail-supply">
        <i class="iconfont icon-supplier ft17"></i>
        {{todolist.SupplierName}}
      </div>
      <div class="detail-fedbck df-body-nopad" v-if="tododetail.length == 0">
        <voice-msg :id="todolist"></voice-msg>
      </div>

      <div class="detail-goods-list">
        <div class="displayflex list-goods-warp" v-for="item in tododetail">
          <div class="pic">
            <img :src="item.PictContent | filterImgUrl">
          </div>
          <div class="msg flex1">
            <p class="ft17">{{item.SupplierGoodsName}}</p>
            <p>{{item.SupplierGoodsSpec}}</p>
            <p>{{item.Producer}}</p>
            <em class="def-color">共<span class="red">{{item.SupplierPoQty}}</span>{{item.SupplierUnit}}</em>
          </div>
        </div>
        <p class="detail-mark ft17" v-if="todolist.Memo"><em class="ft17">备注留言：</em><i class="gray">{{(todolist.Memo == 'null') ? '':todolist.Memo}}</i></p>
        <div class="detail-num">
          <em v-if="todolist.CountSum>0">共{{todolist.CountSum}}种商品</em>小计:<span class="red">￥{{(amount || todolist.DetailSum) | fmoney}}</span>
        </div>
      </div>
      <div class="detail-customs">
        <p>要求到货日期：{{todolist.PlanEndDate | time}}
          <!-- <span v-if="todolist.BillState!='P07' && todolist.BillState!='P10'">（{{todolist.PlanEndDate | jsDateDiff}}）</span> -->
        </p>
        <p>下单时间：{{todolist.BillDate | timeshort}}</p>
      </div>
     
    </div>
    <template v-if="!tab">
      <feed-back :guid="todolist.Guid" :billno='todolist.BillNo'></feed-back>
    </template>
  </div>
</template>

<script>
import detailHeader from '@/components/core/header/detail_header.vue';
import feedBack from '@/components/share/billfb/billfb.vue';
import voiceMsg from '@/components/share/voiceMsg/voicemsg.vue';
import appHeader from '@/components/core/header/app_header.vue';
export default {
  name:'acceptDetail',
  components: {
    detailHeader,
    feedBack,
    voiceMsg,
    appHeader
  },
  data() {
    return {
      tab:true,
      tododetail:[],
      todolist:[],
    }
  },
  computed:{
    amount(){
      var total=0;
      for(var i = 0;i<this.tododetail.length;i++){
        total = total+this.tododetail[i].Amount;
      };
      return total;
    },
    guid(){
      return this.$route.query.id;
    }
  },
  created(){
    this.getDate();
   
  },
  mounted() {
    this.$nextTick(function() {

    })
  },
  methods: {
    //获取详情
    getDate(){
      var self = this;
      var query = {
        Guid: this.guid,
      };
      this.Ajax.post('SearchOrderDetailGuid', query).then(function(resp) {
        self.tododetail = resp.Datas;
      });
      this.Ajax.post('SearchOrderGuidNew', query).then(function(resp) {
        self.todolist = resp.Data;
        self.itemsImg=JSON.parse(self.todolist.Picture);
        self.itemsVoice =JSON.parse(self.todolist.Voice);
      });
    },
    //受理操作
    accept(){
      var self = this;
      var userinfo = JSON.parse(localStorage.userinfo);
      var query = {
        Guid: this.todolist.Guid,
        BuyerGUID: userinfo.StaffID,
        BuyerName: userinfo.Name,
        BillState: 'P03',
        type:'',
        FeedbackGUID:'',
        FeedbackName:''
      };
      this.Ajax.post('OrderAcceptance',query).then(function(resp){
        if (resp.IsSuccess) {
          self.MessageBox.alert('受理成功').then(action => {
            self.$router.go(-1);
          });
        } else {
          self.Toast({
            message: resp.ErrorMessage||'操作失败，请稍后重试',
          });
        }
      });
    },
    Share() {
      var self = this;
      self.jWeixin.showOptionMenu();
      self.jWeixin.onMenuShareAppMessage({
          title: '订单详情', // 分享标题
          desc: "",
          link: "订单详情", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl:"", // 分享图标
          type: '', // 分享类型,music、video或link，不填默认为link
          dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
          success: function() {
             alert('分享成功');
            //分享成功
          },
          cancel: function() {
             alert('分享失败');
            //分享失败
          }
      });
      //self.onMenuShareAppMessage();
    },
    onMenuShareAppMessage() {
      var self = this;
      var url = location.href;
      url = url.substr(0, url.indexOf(location.hash)) + 'images/icon/share1.png';
      self.jWeixin.onMenuShareAppMessage({
          title: '订单详情', // 分享标题
          desc: "",
          link: "订单详情", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl:url, // 分享图标
          type: '', // 分享类型,music、video或link，不填默认为link
          dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
          success: function() {
             alert('分享成功');
            //分享成功
          },
          cancel: function() {
             alert('分享失败');
            //分享失败
          }
      });
    }
  }
}
</script>